<template>
  <div class="app-container">
    <el-card class="elian-box elian-box-query">
      <template #header>
        <div class="clearfix">
          <span class="title">查询表单</span>
        </div>
      </template>
      <el-form ref="form" :model="form" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名:"  prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄：" prop='age'>
              <el-input v-model="form.age"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮件：" prop='email'>
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-row style="margin-bottom:10px">
      <el-col :span="24">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click=""
        >
          搜索
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-error"
          size="small"
          @click=""
        >
          清空
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" height="300" stripe border>
      <el-table-column 
        prop="id" label="编号" width="150"></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="120">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件"
        width="120">
      </el-table-column>
    </el-table>
    <!-- <el-button @click="getUserData">查询接口</el-button> -->
  </div>
</template>
<script>
import axios from 'axios'
import Table from '@/components/Table/index'
export default {
  components:{
    Table
  },
  data(){
    return{
      showMore: false,
      form:{
        name:'',
        age:'',
        email:''
      },
      tableData:[],
    }
  },
  methods:{
    getUserData(){
      this.$http.post('/api/v1/test/user',this.form)
    },
    getData: function () {
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/people/list/'
        }).then((response)=> {
          console.log(response);
          this.tableData = response.data;
          console.log(response.data);
          });
    },
  },
  created(){
    this.getData()
  }
}
</script>
<style lang="scss" scoped>

</style>